<template>
	<view>
		<Search class="search"></Search>
		
		<Tab :reciveTabs="typelist" @isActive="isActive">
			
			<template v-slot="{tablist}" >
				<view class="tablist">
					<!-- 小标题 -->
					<view class="header">
						商品分类
					</view>
					<!-- 二级系列商品.跳转 -->
					<view class="mian" >
						<view class="item" v-for="item in tablist">
							<navigator class="mian" :url="'../mall-goodlist/mall-goodlist?cateId='+item.cateId" hover-class="none" open-type="navigate">
								<image class="itemImage" :src="item.cateImage"></image>
								<view class="text"> <text>{{item.cateName}}</text>  </view>
							</navigator>
						</view>
					</view>	
				</view>
			</template>		
		</Tab>
	
	</view>
</template>

<script>
	import Search from '../../../components/mall-search/mall-search.vue'
	import   Tab   from '../../../components/mall-tab/mall-tab.vue'
	
	import {createNamespacedHelpers} from "vuex"
	const {mapState,mapMutations,mapActions} = createNamespacedHelpers("mall");
	
	
	export default {
		data() {
			return {
				tabs:[],
				array:{},
				
			}
		},
		components:{
			Search,Tab
		},
		onLoad() {
			const val=uni.getStorageSync("Id")
			let val2 = JSON.parse(val)
			this.isActive(val2)
			this.getType(val2);
			
			// console.log(98885,this.typelist);
		},
		computed:{
			...mapState(["typelist"])
			  
		},
		methods:{
			...mapMutations(["setList"]),
			...mapActions(["getType"]),
			
			isActive(e){
				this.typelist.map((item)=>{
					if(item.cateId==e){
						item.isActive=1
					}
					else{
						item.isActive=0
					}
					
					
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tablist{
		box-sizing: border-box;
		
		.header{
			font-size: 28rpx;
			width: 100%;
			height: 60rpx;
			padding-left: 20rpx;
			line-height: 60rpx;
			color: #808080;
			-moz-box-shadow: inset 0 0 10px #CCC;
			-webkit-box-shadow: inset 0 0 10px #CCC;
			box-shadow: inset 0 0 10px #CCC;
		}
		.mian{
			text-align: center;
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			width: 100%;
			flex-wrap:wrap;
			justify-content: space-between;
			.item{
				text-align: center;
				width: 45%;
				// height: 200rpx;
				display: flex;
				align-items: center;
				.itemImage{
					margin-top: 30rpx;
					width: 180rpx;
					height: 180rpx;
				}
				.text{
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: #808080;
				}
				
			}
		}
		
	}

</style>
